<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="never">
    <title>用户列表</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
</head>
<body>
    
    <!-- layui版心 自带响应式 -->
    <div class="layui-container">
        <!-- 表格主体 -->
        <table id="demo" lay-filter="test"></table>
    </div>

    <script type="text/html" id="detail">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm layui-btn-radius" lay-event="detail">获取详情</button>
    </script>
    <script src="../lib/layui/layui.all.js"></script>
    <script>

        /*作业： 使用layui 渲染出来 用户列表
        地址： http://bufantec.com/api/test/user/list
        参数： start 页码  limit 每页的数据个数
        数据： 用户名（name）、电话、性别（0男 1女）、学校、地址、年龄*/

        var table = layui.table;
        var tableEle = table.render({
            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
            cols: [[  //设置表头
                {
                    title: '序号',
                    type: 'numbers'
                },
                {
                    title: '用户名',
                    field: 'name'
                },
                {
                    title: '电话',
                    field: 'tel',
                },
                {
                    title: '性别',
                    field: 'sex' || 男
                },
                {
                    title: '学校',
                    field: 'school'
                },
                {
                    title: '地址',
                    field: 'address'
                },
                {
                    title: '年龄',
                    field: 'age'
                },
                {
                    toolbar: '#detail'
                }
            ]],
            //,…… //更多参数参考右侧目录：基本参数选项
            url: 'http://bufantec.com/api/test/user/list',
            method: 'get',
            // 数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": '你在解析啦', //解析提示文本
                    "count": res.data.totalRow, //解析数据长度
                    "data": res.data.list //解析数据列表
                };       
            },
            // 用于对分页请求的参数：page、limit重新设定名称
            request: {
                pageName: 'start', //页码的参数名称，默认：page
                // limitName: 'nums' //每页数据量的参数名，默认：limit
            },
            // 数据渲染完的回调。你可以借此做一些其它的操作
            done() {
                console.log('我完成啦！');
            },
            // 开启分页
            page: {
                limit: 5,
                limits: [5, 10, 15, 20]
            },
            text: {

            },
            id: 'myTable'
        });
        table.on('tool(test)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent = 'detail') {
                console.log(data);
            }
        })
    </script>
</body>
</html>